webpack loader file

您所在的位置：网站首页 › 图片 icon › webpack loader file

webpack loader file

2022-11-25 16:14| 来源: 网络整理| 查看: 265

1、什么是loader

webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader。

2、如何使用loader

①　通过npm安装对应的loader。 ②　按照loader作者的要求在webpack进行相关配置。 ③　使用配置好的loader。

3、webpack-file-loader(打包css,js中的图片、字体图标) (1)fileloader使用

fileloader可以打包图片文件。

https://www.webpackjs.com/loaders/file-loader/

①　安装file-loader

npm install --save-dev file-loader

②　在webpack.config.js中配置file-loader

打包图片 module.exports={ module:{ //告诉webpack如何处理webpack不能够识别的文件 rules:[ { test:/\.(png|jpg|gif)$/, use:[ { loader:'file-loader', options:{} } ] } ] } } 打包字体图标 { test: /\.(eot|json|svg|ttf|woff|woff2)$/, use: [ { loader: 'file-loader', options: { // 指定打包后文件名称 name: '[name].[ext]', // 指定打包后文件存放目录 outputPath: 'font/', } ] } (2)fileloader的其他配置

①　默认情况下fileloader生成的图片名就是文件内容的 MD5 哈希值可以新增配置：name: "[name].[ext]" ②　默认情况下fileloader会将生成的图片放到dist根目录下面如果放到指定目录下面, 那么可以新增配置：outputPath: "images/" ③　如果要将图片托管到其它服务器, 需配置 publicPath: "托管服务器地址" ③　遇到的坑：file-loader打包图片文件时路径错误输出为[object-module] 在webpack的file-loader配置项里，设置esModule为false。

module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { esModule: false } } ] } ] } 3.webpack-url-loader(打包css,js中的图片) (1)urlloader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

(2)urlloader使用

https://www.webpackjs.com/loaders/url-loader/

①　安装urlloader

npm install --save-dev url-loader

②　配置urlloader /* module: 告诉webpack如何处理webpack不能够识别的文件 * */

module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader', options: { limit: 1024 * 100, // 指定打包后文件名称 name: '[name].[ext]', // 指定打包后文件存放目录 outputPath: 'images/', } } ] }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]', }, }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]'), }, }, ] }

limit: 指定图片限制的大小如果被打包的图片超过了限制的大小, 就会将图片保存为一个文件；如果被打包的图片没有超过限制的大小, 就会将图片转换成base64的字符串。

(3)优势

图片比较小的时候直接转换成base64字符串图片, 减少请求次数，图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片。

【本文地址】

webpack loader file

webpack loader file

今日新闻

推荐新闻